<template>
  <!-- 添加或修改对话框 -->
  <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" width="600px"
    :close-on-click-modal="false">
    <el-form ref="dataForm" :rules="rules" :model="dataForm" status-icon label-position="left" label-width="100px"
      style="width: 80%; margin-left:50px;">
      <el-form-item label="学员姓名" prop="name">
        <el-input v-model="dataForm.name" />
      </el-form-item>
      <!--<el-form-item label="昵称" prop="nickName">-->
      <!--<el-input v-model="dataForm.nickName"/>-->
      <!--</el-form-item>-->
      <el-form-item label="手机号" prop="phone">
        <el-input v-model="dataForm.phone" type="number" />
      </el-form-item>
      <el-form-item label="性别" prop="gender">
        <el-select v-model="dataForm.gender" clearable placeholder="请选择">
          <el-option :value="1" label="男" />
          <el-option :value="2" label="女" />
        </el-select>
      </el-form-item>

      <!--<el-form-item label="生日" prop="birthday">-->
      <!--<el-date-picker-->
      <!--v-model="dataForm.birthday"-->
      <!--type="date"-->
      <!--placeholder="选择日期"-->
      <!--format="yyyy 年 MM 月 dd 日"-->
      <!--value-format="yyyy-MM-dd"/>-->
      <!--</el-form-item>-->
      <el-form-item label="身份证" prop="idCard">
        <el-input v-model="dataForm.idCard" />
      </el-form-item>
      <el-form-item label="学员密码" prop="lognPasswd">
        <el-input v-model="dataForm.lognPasswd" />
      </el-form-item>
      <el-form-item label="学员类型" prop="studentsType" v-if="selectTF">
        <el-select v-model="dataForm.studentsType" clearable placeholder="请选择">
          <el-option :value="1" label="主要负责人" />
          <el-option :value="2" label="管理人员" />
          <el-option :value="3" label="从业人员" />
        </el-select>
      </el-form-item>
      <el-form-item label="课程类型" prop="courseType" v-if="selectTF">
        <el-select v-model="dataForm.courseType" clearable placeholder="请选择">
          <el-option :value="1" v-show="dataForm.studentsType==1" label="主要负责人新取证" />
          <el-option :value="2" v-show="dataForm.studentsType==1" label="主要负责人继续教育" />
          <el-option :value="3" v-show="dataForm.studentsType==2" label="管理人员新取证" />
          <el-option :value="4" v-show="dataForm.studentsType==2" label="管理人员继续教育" />
          <el-option :value="5" v-show="dataForm.studentsType==3" label="从业人员新取证" />
          <el-option :value="6" v-show="dataForm.studentsType==3" label="从业人员继续教育" />
        </el-select>
      </el-form-item>
      <el-form-item label="学员类型" prop="studentsType" v-if="!selectTF">
        <el-select v-model="dataForm.studentsType" disabled clearable placeholder="请选择">
          <el-option :value="1" label="主要负责人" />
          <el-option :value="2" label="管理人员" />
          <el-option :value="3" label="从业人员" />
        </el-select>
      </el-form-item>
      <el-form-item label="课程类型" prop="courseType" v-if="!selectTF">
        <el-select v-model="dataForm.courseType" disabled clearable placeholder="请选择">
          <el-option :value="1" v-show="dataForm.studentsType==1" label="主要负责人新取证" />
          <el-option :value="2" v-show="dataForm.studentsType==1" label="主要负责人继续教育" />
          <el-option :value="3" v-show="dataForm.studentsType==2" label="管理人员新取证" />
          <el-option :value="4" v-show="dataForm.studentsType==2" label="管理人员继续教育" />
          <el-option :value="5" v-show="dataForm.studentsType==3" label="从业人员新取证" />
          <el-option :value="6" v-show="dataForm.studentsType==3" label="从业人员继续教育" />
        </el-select>
      </el-form-item>
      <el-form-item label="缴费状态" prop="payStatus">
        <el-select v-model="dataForm.payStatus" clearable placeholder="请选择">
          <el-option :value="0" label="未缴费" />
          <el-option :value="1" label="已缴费" />
        </el-select>
      </el-form-item>
      <el-form-item label="过期时间" prop="expireTime">
        <el-date-picker style="width: 100%;" v-model="dataForm.expireTime" type="datetime" placeholder="选择日期" format="yyyy 年 MM 月 dd 日 hh:mm:ss"
        value-format="yyyy-MM-dd hh:mm:ss" />
      </el-form-item>
      <!--<el-form-item label="学员地址" prop="address">-->
      <!--<el-input v-model="dataForm.address"/>-->
      <!--</el-form-item>-->
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button size="mini" @click="dialogFormVisible = false">取消</el-button>
      <el-button size="mini" v-if="dialogStatus=='create'" type="primary" @click="createData">确定</el-button>
      <el-button size="mini" v-else type="primary" @click="updateData">确定</el-button>
    </div>
  </el-dialog>
</template>

<script>
  export default {
    data() {
      return {
        textMap: {
          update: '编辑用户',
          create: '添加用户'
        },
        rules: {
          name: [{
            required: true,
            message: '学员姓名不能为空',
            trigger: 'blur'
          }],
          phone: [{
            required: true,
            message: '学员电话不能为空',
            trigger: 'blur'
          }],
          idCard: [{
            required: true,
            message: '学员身份证不能为空',
            trigger: 'blur'
          }],
          studentsType: [{
            required: true,
            message: '学员类型不能为空',
            trigger: 'blur'
          }],
          payStatus: [{
            required: true,
            message: '缴费状态不能为空',
            trigger: 'blur'
          }],
          expireTime: [{
            required: true,
            message: '过期时间不能为空',
            trigger: 'blur'
          }],
          courseType: [{
            required: true,
            message: '课程类型不能为空',
            trigger: 'blur'
          }]
        },
        dialogStatus: '',
        dialogFormVisible: false,
        selectTF: true,
        dataForm: {}
      }
    },
    methods: {
      createData() {
        this.$refs['dataForm'].validate(valid => {
          if (valid) {
            this.dataForm.expireTimeStr = this.dataForm.expireTime
            this.$emit('createData', this.dataForm)
          }
        })
      },
      updateData() {
        this.$refs['dataForm'].validate(valid => {
          if (valid) {
            this.$emit('updateData', this.dataForm)
          }
        })
      },
      chosePwd() {
        this.dataForm.lognPasswd = this.dataForm.idCard.substring(this.dataForm.idCard.length - 6)
      },
      open(type, row) {
        this.dialogStatus = type
        if (type === 'update') {
          this.dataForm = {
            ...row
          }
        } else {
          this.dataForm = {
            ...row,
            companyId: row.id,
            payStatus: 0,
            gender: 1,
            lognPasswd: '123456'
          }
        }
        this.dialogFormVisible = true
      },
      close() {
        this.dialogFormVisible = false
      }
    }
  }
</script>

<style scoped>

</style>
